<!DOCTYPE html>
<html lang="en">
<head>

<meta charset="UTF-8">

<title>Homene - Personal Website Template</title>

<meta http-equiv="X-UA-Compatible" content="IE=Edge">
<meta name="description" content="Personal Website Template">
<meta name="keywords" content="Personal, Website Template, Minimal HTML Template, Freelancer">
<meta name="author" content="khai tawng">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">

<link rel="stylesheet" href="__PUBLIC__/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="__PUBLIC__/assets/css/animate.css">
<link rel="stylesheet" href="__PUBLIC__/assets/css/magnific-popup.css">
<link rel="stylesheet" href="__PUBLIC__/assets/css/font-awesome.min.css">

<!-- Main css -->
<link rel="stylesheet" href="__PUBLIC__/assets/css/style.css">

</head>
<body data-spy="scroll" data-target=".navbar-collapse" data-offset="50">

<!-- PRE LOADER -->
<div class="preloader">
     <div class="spinner">
          <span class="spinner-rotate"></span>
     </div>
</div>


<!-- NAVIGATION SECTION -->
<div class="navbar custom-navbar navbar-fixed-top" role="navigation">
     <div class="container">

          <div class="navbar-header">
               <button class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
                    <span class="icon icon-bar"></span>
                    <span class="icon icon-bar"></span>
                    <span class="icon icon-bar"></span>
               </button>
               <!-- lOGO TEXT HERE -->
               <a href="index.html" class="navbar-brand">miss.tang</a>
          </div>

          <div class="collapse navbar-collapse">
               <ul class="nav navbar-nav navbar-right">
                    <li><a class="smoothScroll" href="#home">Home</a></li>
                    <li><a class="smoothScroll" href="#about">About Jack Doe</a></li>
                    <li><a class="smoothScroll" href="#work">My Works</a></li>
                    <li><a class="smoothScroll" href="#contact">Contact</a></li>
               </ul>
          </div>

     </div>
</div>


<!-- HOME SECTION -->
<section id="home">

     <div class="container">
          <div class="row">

               <div class="col-md-offset-1 col-md-2 col-sm-3">
                    <img src="__PUBLIC__/assets/images/touxiang.jpg" class="wow fadeInUp img-responsive img-circle" data-wow-delay="0.2s" alt="about image">
               </div>

               <div class="col-md-8 col-sm-8">
                    <h1 class="wow fadeInUp" data-wow-delay="0.6s">Hope you will be your own sun shining without the light of someone else.——miss.tang</h1>
                    <a href="#" class="wow fadeInUp btn btn-default section-btn here" data-wow-delay="1s">Don't Click Here</a>
               </div>

          </div>
     </div>
</section>

<!-- ABOUT SECTION -->
<section id="about">
     <div class="container">
          <div class="row">

               <div class="col-md-8 col-sm-12">
                    <div class="about-thumb">
                         <div class="wow fadeInUp section-title" data-wow-delay="0.6s">
                              <h2>一只柔软的小胖几</h2>
                              <p><strong>miss.tang</strong></p>
                         </div>
                         <div class="wow fadeInUp" data-wow-delay="0.8s">
                              <p>
                                   我是一个小胖子，
                                   没事摸摸小肚子。
                                   喜欢一个小瘦子，
                                   他就是个小傻子。

                              </p>
                         </div>
                         <ul class="social-icon">
                              <li class="wow fadeInLeft" data-wow-delay="1s"><a href="#" class="fa fa-twitter" class="here"></a></li>
                              <li class="wow fadeInUp" data-wow-delay="1.2s"><a href="#" class="fa fa-linkedin" class="here"></a></li>
                              <li class="wow fadeInRight" data-wow-delay="1.4s"><a href="#" class="fa fa-dribbble" class="here"></a></li>
                         </ul>
                    </div>
               </div>

               <div class="col-md-4 col-sm-12">
                    <div class="wow fadeInUp" data-wow-delay="0.4s">
                         <h2>On Instagram</h2>
                    </div>

                    <div class="wow fadeInUp" data-wow-delay="0.6s">
                         <a href="https://www.instagram.com/p/cqED9yjN0j/" class="here">
                              <img src="__PUBLIC__/assets/images/instagram-image1.jpg" class="img-responsive" alt="instagram image">
                         </a>

                         <a href="https://www.instagram.com/p/enL0SsDN51/" class="here">
                              <img src="__PUBLIC__/assets/images/instagram-image2.jpg" class="img-responsive" alt="instagram image">
                         </a>

                         <a href="https://www.instagram.com/p/apOuRTDNwJ/" class="here">
                              <img src="__PUBLIC__/assets/images/instagram-image3.jpg" class="img-responsive" alt="instagram image">
                         </a>

                         <a href="https://www.instagram.com/p/ZXIj33jN2v/" class="here">
                              <img src="__PUBLIC__/assets/images/instagram-image4.jpg" class="img-responsive" alt="instagram image">
                         </a>

                         <a href="https://www.instagram.com/p/Xwev1FjN9-/" class="here">
                              <img src="__PUBLIC__/assets/images/instagram-image5.jpg" class="img-responsive" alt="instagram image">
                         </a>
                    </div>
               </div>

          </div>
     </div>
</section>


<!-- SKILL SECTION -->
<section id="skill">
     <div class="container">
          <div class="row">

               <div class="col-md-4 col-sm-6">
                    <div class="wow fadeInUp section-title" data-wow-delay="0.2s">
                         <h2>太瘦会被风吹跑的</h2>
                         <p>哗啦啦啦沙师弟</p>
                    </div>
               </div>

               <div class="col-md-offset-1 col-md-6 col-sm-6">
                    <div class="skill-thumb">

                         <div class="wow fadeInUp" data-wow-delay="1s">
                              <strong>美貌</strong>
                                   <span class="pull-right">95%</span>
                                        <div class="progress">
                                             <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="95" aria-valuemin="0" aria-valuemax="100" style="width: 90%;"></div>
                                        </div>
                         </div>

                         <div class="wow fadeInUp" data-wow-delay="1.2s">
                              <strong>体重</strong>
                                   <span class="pull-right">100%</span>
                                        <div class="progress">
                                             <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="80" aria-valuemin="0" aria-valuemax="100" style="width: 100%;"></div>
                                        </div>
                         </div>

                         <div class="wow fadeInUp" data-wow-delay="1.4s">
                              <strong>才华</strong>
                                   <span class="pull-right">75%</span>
                                        <div class="progress">
                                             <div class="progress-bar progress-bar-primary" role="progressbar" aria-valuenow="65" aria-valuemin="0" aria-valuemax="100" style="width: 75%;"></div>
                                        </div>
                         </div>

                    </div>
               </div>
               
          </div>
     </div>
</section>


<!-- WORK SECTION -->
<section id="work">
     <div class="container">
          <div class="row">

               <div class="col-md-12 col-sm-12">
                    <div class="wow fadeInUp section-title" data-wow-delay="0.2s">
                         <h2>Dream</h2>
                         <p>  姑娘貌美一枝花，才学素养人品佳。
                              活泼开朗不八卦，头脑敏锐有想法。
                              踏实奋进不做假，乐于求知肯深挖。
                              舞文弄墨擅策划，慧心妙舌喜表达。
                              待到秋来九月八，我花开后百花杀。
                              冲天香阵透长安，满城尽戴黄金甲。</p>
                    </div>
               </div>

               <div class="wow fadeInUp col-md-3 col-sm-6" data-wow-delay="0.4s">
                    <!-- WORK THUMB -->
                    <div class="work-thumb">
                         <a href="__PUBLIC__/assets/images/work-1.jpg" class="image-popup">
                              <img src="__PUBLIC__/assets/images/work-1.jpg" class="img-responsive" alt="Work">
                         </a>
                    </div>
                    <h4>Graphic & Branding</h4>
               </div>

               <div class="wow fadeInUp col-md-3 col-sm-6" data-wow-delay="0.6s">
                    <!-- WORK THUMB -->
                    <div class="work-thumb">
                         <a href="__PUBLIC__/assets/images/work-2.jpg" class="image-popup">
                              <img src="__PUBLIC__/assets/images/work-2.jpg" class="img-responsive" alt="Work">
                         </a>
                    </div>
                    <h4>Logo Design</h4>
               </div>

               <div class="wow fadeInUp col-md-3 col-sm-6" data-wow-delay="0.8s">
                    <!-- WORK THUMB -->
                    <div class="work-thumb">
                         <a href="__PUBLIC__/assets/images/work-3.jpg" class="image-popup">
                              <img src="__PUBLIC__/assets/images/work-3.jpg" class="img-responsive" alt="Work">
                         </a>
                    </div>
                    <h4>Photography</h4>
               </div>

               <div class="wow fadeInUp col-md-3 col-sm-6" data-wow-delay="0.8s">
                    <!-- WORK THUMB -->
                    <div class="work-thumb">
                         <a href="__PUBLIC__/assets/images/work-4.jpg" class="image-popup">
                              <img src="__PUBLIC__/assets/images/work-4.jpg" class="img-responsive" alt="Work">
                         </a>
                    </div>
                    <h4>Minimal Themes</h4>
               </div>

          </div>
     </div>
</section>


<!-- CONTACT SECTION -->
<section id="contact">
     <div class="container">
          <div class="row">

               <div class="col-md-12 col-sm-12">
                    <div class="wow fadeInUp section-title" data-wow-delay="0.2s">
                         <h2>You got projects?</h2>
                         <p>Lorem ipsum dolor sit amet, consectetur venenatis tincidunt.</p>
                    </div>
               </div>

               <div class="col-md-12 col-sm-12">
                     <!-- CONTACT FORM HERE -->
                    <div class="wow fadeInUp" data-wow-delay="0.6s">
                        <form id="contact-form">
                              <div class="col-md-4 col-sm-4">
                                   <input type="text" class="form-control" name="name" placeholder="Name">
                              </div>
                              <div class="col-md-4 col-sm-4">
                                   <input type="email" class="form-control" name="email" placeholder="Email">
                              </div>
                              <div class="col-md-4 col-sm-4">
                                   <input type="text" class="form-control" name="name" placeholder="Subject">
                              </div>
                              <div class="col-md-12 col-sm-12">
                                   <textarea class="form-control" rows="5" name="message" placeholder="Message"></textarea>
                              </div>
                              <div class="col-md-offset-9 col-md-3 col-sm-offset-3 col-sm-6">
                                   <button id="submit" type="submit" class="form-control" name="button" class="here">Send Message</button>
                              </div>
                        </form>
                    </div>

               </div>

          </div>
     </div>
</section>


<!-- SCRIPTS -->
<script src="__PUBLIC__/assets/js/jquery.js"></script>
<script src="__PUBLIC__/assets/js/bootstrap.min.js"></script>
<script src="__PUBLIC__/assets/js/smoothscroll.js"></script>
<script src="__PUBLIC__/assets/js/jquery.magnific-popup.min.js"></script>
<script src="__PUBLIC__/assets/js/magnific-popup-options.js"></script>
<script src="__PUBLIC__/assets/js/wow.min.js"></script>
<script src="__PUBLIC__/assets/js/custom.js"></script>
<script>
     $('.here').click(function(){
          alert('笨蛋，不要乱点');
          return false;
     })
     $('#submit').click(function () {
         alert('不许留言');return false;
     });
     </script>
</body>
</html>